<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lexy - 个人博客 </title>
    
   	<link href="view/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="view/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="view/bac/css/animate.css" rel="stylesheet">
    <link href="view/bac/css/style.css" rel="stylesheet">
    <link href="view/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
   	
	<script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
		<!--这个插件是瀑布流主插件函数必须-->
	<script type="text/javascript" src="view/rec/js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jquery.infinitescroll.min.js"></script>
	<script type="text/javascript">
	
	
	$(function(){
				
			
	        var $window = $(window);  
	        var $document = $(document);
				
				/*瀑布流开始*/
				var container = $('#gallery .gallery-list');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/320);
						tmpWid=column*320;
					}
					$('#gallery').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 320,
				    itemSelector : '.gallery-list',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});

				
				
				
				container.infinitescroll({
			        navSelector  : '#navigation',
			        nextSelector : '#navigation a',
			        itemSelector : '.item',
			        animate: true,
			        dataType: 'json',//可以是json
			        template: function(data) {
						console.log(data);
			        	var sqlJson = data.detail.gallery.list
						var html = "";
			        	for(var i in sqlJson){
							var url = sqlJson[i].req_url;
							console.log(url);
							html+="<li class='item'><a href='getGalleryContent?serialId="+sqlJson[i].serial_id+"' target='_blank' class='a-img'><img src='"+url.split("@")[0]+"'></a>";
							html+="<h2 class='li-title'>"+sqlJson[i].blog_title+"</h2>";
							html+="<div class='qianm clearfloat'>";
							html+="<span class='sp1'><b>"+sqlJson[i].click_num+"</b>浏览</span>";
							html+="<span class='sp2'>"+sqlJson[i].click_num+"</span><span class='sp3'>"+sqlJson[i].update_time+"&nbsp;By</span></div></li>";		
						}
                    	return html;
	                },
			        loading: {
			            finishedMsg: '没有更多的页面加载。',
			            loadingText:'加载中'
			            //img: 'images/loading.gif'
			        }
			    },function(newElements){
		    		console.log(newElements);
		    		console.log("OK...");
		            var $newElems = $(newElements).css({ opacity: 0}).appendTo(container);
					$newElems.imagesLoaded(function(){
						$newElems.animate({ opacity: 1},10);
						container.masonry( 'appended', $newElems,true);
						loading.data("on",true).fadeOut();
			        }); 
		    		

		        });
				
				function loadImage(url) {
				     var img = new Image(); 
				     //创建一个Image对象，实现图片的预下载
				      img.src = url;
				      if (img.complete) {
				         return img.src;
				      }
				      img.onload = function () {
				       	return img.src;
				      };
				 };
				 loadImage('view/rec/images/one.jpg');
				/*item hover效果*/
				var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
				$('#waterfull').on('mouseover','.item',function(){
					var random=Math.floor(Math.random() * 4);
					$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
				});
				$('#waterfull').on('mouseout','.item',function(){
					$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
				});
		})
		</script>
	
</head>
<body class=" gray-bg top-navigation">
	<div id="wrapper"  >
		<div id="page-wrapper" class="gray-bg">
			<div class="row border-bottom white-bg navbar-fixed-top">
				<nav class="navbar navbar-static-top" role="navigation">
                    <div class="navbar-header">
                        
                        <a href="#" class="navbar-brand">OFCloud</a>
                    </div>
                    <div class="navbar-collapse collapse" id="navbar">
						<ul class="nav navbar-top-links navbar-right">
							<li>
								<a id="sgin-in-model" class="layout-top">
									<span>
										<i class="fa fa-sign-in"></i>登录</span>
								</a>
							</li>
						</ul>
					</div>
                </nav>
			</div>
		</div>
	</div>
	<div id="wrapper wrapper-content animated fadeInUp" style="width:90%;margin-left:5%;margin-top: 80px;">
    	<div class="row" style="display: hidden; padding:0px 0px 10px 10px">
        	<div class="col-sm-2 " style=" ">
				<div class="ibox">
					<div class="ibox-title">
						<h5>标签</h5></div>
					<div class="ibox-content" style="padding:0px 0px 10px 10px">
						<div id="label-list">
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button>
							<button class="btn btn-white btn-xs margin-top" type="button">速比涛</button></div>
					</div>
				</div>
			</div>
        	<div class="col-sm-10" id="gallery"  >
				<c:forEach items="${gallery.list }" var="obj">
					<div class="gallery-list">
						<div class="fancybox">
							<img src="${obj.blog_content }" style="width:25%">
						</div>
					</div>
				</c:forEach>
				
    		</div>
		</div>
	</div>
    <footer>
         <div class="container">
         
            <div class="copy text-center">
               Copyright 2017 <a href='#'>lexy's blog</a>
            </div>
            
         </div>
    </footer>
	<div id="modal-form" class="modal inmodal fade"  role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-7 b-r">
                            <h3 class="m-t-none m-b">登录</h3>

                            <p>欢迎登录本站(⊙o⊙)</p>

                            
                        <form role="form"  id="loginForm" >
                                <div class="form-group">
                                    <label>用户名：</label>
                                    <input id="cname" name="name" placeholder="请输入用户名" class="form-control" required="" aria-required="true">
                                </div>
                                <div class="form-group">
                                    <label>密码：</label>
                                    <input id="cpwd" name="pwd"type="password" placeholder="请输入密码" class="form-control" required="" aria-required="true">
                                </div>
                                <div>
                                    <button id="sign-btn" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" ><strong>登录</strong>
                                    </button>
                                   <label class="">
                                        <div class="icheckbox_square-green" style="position: relative;"><input type="checkbox" class="i-checks" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                                        	自动登录
                               		</label>
                                </div>
                        </form>
                        </div>
                        <div class="col-sm-5">
                            <h4>还不是会员？</h4>
                            <p>您可以注册一个账户</p>
                            <p class="text-center">
                                <a href="toRegisterPage"><i class="fa fa-sign-in big-icon"></i></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 隐藏  -->
    
	<input type="hidden" id="enFlag" value="${enFlag}">    
    
    <!-- 全局js -->
	<script src="view/plugins/bootstrap/js/bootstrap.min.js"></script>
	
	    <!-- jQuery Validation plugin javascript-->
    <script src="view/plugins/validate/jquery.validate.min.js"></script>
    <script src="view/plugins/validate/messages_zh.min.js"></script>
    </body>
</html>